<template>
    <div id="cart-tab" class="box">
        <div class="head">
            <h1>购物车</h1>
            <p>已选商品{{ allTotal }}件（不含运费）：{{ allTotalprice | toTwo }}
                <button>结算</button>
            </p>
        </div>
        <div class="content">
            <div class="c-head">
                <div class="check">
                    <label>
                        <input type="checkbox" v-model="allCheck">全选
                    </label>
                </div>
                <div class="msg">商品信息</div>
                <div class="price">单价</div>
                <div class="num">数量</div>
                <div class="sum">金额</div>
                <div class="operate">操作</div>
            </div>
            <div class="main">
                <div class="item" v-for="item in cart_tab" :key="item.id">
                    <div class="check">
                        <input type="checkbox" name="check" :value="item.id" v-model="checkList">
                    </div>
                    <div class="msg">
                        <!-- {{ item.name }} -->
                        <img :src="item.img">
                        <p>{{ item.content }}</p>
                    </div>
                    <div class="price">{{ item.price | toTwo }}</div>
                    <div class="num">
                        <button @click="item.num === 1 || item.num--">-</button>
                        <input type="text" v-model.number="item.num">
                        <button @click="item.num++">+</button>
                    </div>
                    <div class="sum">{{ item.price * item.num | toTwo }}</div>
                    <div class="operate">
                        <a href="javascript:;" @click="onDelete(item.id)">删除</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'cart-tab',
    data() {
        return {
            checkList: [],
            cart_tab: [
                {
                    id: 1,
                    name: "苹果原装耳机",
                    img: require("../assets/images/1.jpg"),
                    content: "Apple苹果原装耳机正品有线iPhone14/13/12/15扁头官方旗舰店官网",
                    price: 138,
                    num: 1
                },
                {
                    id: 2,
                    name: "运动相机",
                    img: require("../assets/images/2.jpg"),
                    content: "akaso brave7le运动相机4K高清摩托车骑行防抖防水记录仪",
                    price: 269,
                    num: 1
                }, {
                    id: 3,
                    name: "荣耀 X50",
                    img: require("../assets/images/3.jpg"),
                    content: "honor/荣耀 X50",
                    price: 139.9,
                    num: 1
                }, {
                    id: 4,
                    name: "滑盖无线蓝牙耳机",
                    img: require("../assets/images/4.jpg"),
                    content: "滑盖无线蓝牙耳机2024新款半入耳电竞游戏无延迟高音质炫酷机甲风",
                    price: 13.44,
                    num: 1
                }, {
                    id: 5,
                    name: "黑白复印机",
                    img: require("../assets/images/5.jpg"),
                    content: "施乐A3黑白复印机打印复印扫描自动双面",
                    price: 99.8,
                    num: 1
                }, {
                    id: 6,
                    name: "蓝牙音响",
                    img: require("../assets/images/6.jpg"),
                    content: "月之暗面 UFO元宇宙概念 创意蓝牙音响搭配香薰精油送女朋友礼品",
                    price: 68.9,
                    num: 1
                },
                {
                    id: 7,
                    name: "苹果AirPods Pro",
                    img: require("../assets/images/7.jpg"),
                    content: "【官方正品】Apple/苹果AirPods Pro(第二代)蓝牙无线耳机JV3",
                    price: 151.8,
                    num: 1
                },
                {
                    id: 8,
                    name: "索尼ZV-E10L",
                    img: require("../assets/images/8.jpg"),
                    content: "Sony/索尼ZV-E10L 直播美颜数码高清视频旅游vlog微单4K相机zve10",
                    price: 40.88,
                    num: 1
                },
            ]
        }
    },
    computed: {
        allCheck: {
            get() {
                return this.checkList.length === this.cart_tab.length
            },
            set(val) {
                return val ? this.checkList = this.cart_tab.map(item => item.id) : this.checkList = []
            }
        },
        allTotal() {
            return this.cart_tab.reduce((total, item) => this.checkList.includes(item.id) ? total + item.num : total, 0)
        },
        allTotalprice() {
            return this.cart_tab.reduce((total, item) => this.checkList.includes(item.id) ? total + item.num * item.price : total, 0)
        },
    },
    filters: {
        toTwo(val) {
            return "￥" + val.toFixed(2)
        }
    },
    methods: {
        onDelete(val) {
            this.cart_tab = this.cart_tab.filter(item => item.id !== val)
            let index = this.checkList.indexOf(val)
            index >= 0 ? this.checkList.splice(index, 1) : null
        }
    }
}
</script>

<style>
.box {
    width: 1200px;
    margin: 100px auto;
    /* border: 1px solid rgba(0, 0, 0); */
}

img {
    height: 100px;
}

a {
    text-decoration: none;
    color: black;
    border-radius: 5px;
    padding: 2px;
    background: #eee;
    font-size: 16px;
    font-weight: 600;
}

.operate {
    align-self: center;
}

.head {
    display: flex;
    justify-content: space-between;
    align-items: last baseline;
    margin: 0 20px;
    border-bottom: 1px solid rgba(0, 0, 0);
}

.c-head,
.item {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    padding: 10px;
}

.item {
    background: rgb(218, 216, 216);
    border-radius: 10px;

}

.num>input {
    width: 40px;
}

.item>.msg {
    display: flex;
    justify-content: first baseline;
}

.msg p {
    width: 100px;
    margin-left: 10px;
    text-align: left;
}

.item {
    display: flex;
    align-items: space-evenly;
}
</style>